<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .img_collection_flex {
            display: flex;
            justify-content: space-between;
        }

        .img_collection_side {
            width: 358px;
        }

        .img_collection_half {
            position: relative;
            margin: 20px auto;
        }

        .img_collection_half img {
            width: 100%;
            height: 100%;
        }

        .img_collection_img_center {
            position: absolute;
            text-align: center;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            top: 0;
        }

        .img_collection_entire {
            width: 345px;
            position: relative;
            padding: 20px 0;
            box-sizing: border-box;
        }

        .img_collection_img_center h3 {
            color: var(--c_b_nav);
            font-size: var(--f_subtitle);
            line-height: var(--l_subtitle);
        }

        .img_collection_img_center p {
            color: var(--c_b_nav);
            font-size: var(--f_text);
            line-height: var(--l_text);
        }

        .img_collection_entire img {
            height: 100%;
            width: 100%;
        }

         @media (max-width:1240px) {
            .img_collection_flex {
                flex-direction: column;
                padding: 0 0;
                box-sizing: border-box;
            }
            .img_collection_entire {
                padding-bottom: 0;
            }
            .img_collection_side,
            .img_collection_entire {
                width: 100%;
            }

            .img_collection_side img,
            .img_collection_entire img {
                object-fit: cover;
            }
            .img_collection_half:nth-child(2){
                margin-bottom: 0;
            }
        } 

        @media (max-width:500px) {
            .img_collection_half {
                height: 235px;
            }
        }
    </style>
</head>

<body>
    <div class="img_collection modular">
        <div class="public_width">
            <div class="public_title">
                <h2>加盟网点</h2>
            </div>
            <div class="img_collection_flex">
                <div class="img_collection_side">
                    <div class="img_collection_half">
                        <img src="https://images.unsplash.com/photo-1600821959327-39338808201a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                            alt="">
                        <div class="img_collection_img_center">
                            <h3>上海</h3>
                            <p>Shanghai</p>
                        </div>
                    </div>
                    <div class="img_collection_half">
                        <img src="https://images.unsplash.com/photo-1613488328514-e424950c0b0d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                            alt="">
                        <div class="img_collection_img_center">
                            <h3>东京</h3>
                            <p>Tokyo</p>
                        </div>
                    </div>
                </div>
                <div class="img_collection_entire">
                    <img src="https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                        alt="">
                    <div class="img_collection_img_center">
                        <h3>巴黎</h3>
                        <p>paris</p>
                    </div>
                </div>
                <div class="img_collection_side">
                    <div class="img_collection_half">
                        <img src="https://images.unsplash.com/photo-1600821959327-39338808201a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                            alt="">
                        <div class="img_collection_img_center">
                            <h3>上海</h3>
                            <p>Shanghai</p>
                        </div>
                    </div>
                    <div class="img_collection_half">
                        <img src="https://images.unsplash.com/photo-1613488328514-e424950c0b0d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                            alt="">
                        <div class="img_collection_img_center">
                            <h3>东京</h3>
                            <p>Tokyo</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>